<div id="map" style="width: 200em; height: 58em"></div>
<!--app-hover-modal></app-hover-modal-->
<div
    class="card"
    style="
        width: 400px;
        height: 320px;
        position: absolute;
        left: 25em;
        top: 100px;
    "
    *ngIf="showIndex"
>
    <div style="display: flex">
        <div class="header"><b>年份指标</b></div>
        <p-calendar
            view="year"
            style="width: 100px; margin-left: 100px"
            [(ngModel)]="indexYear"
            dateFormat="yy年"
            (ngModelChange)="changeIndexYear()"
        ></p-calendar>
        <i
            class="pi pi-times"
            style="font-size: 20px; margin-left: 40px"
            (click)="closeIndex()"
        ></i>
    </div>
    <hr />
    <div
        class="col-12 index-box"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div>机井数量 (个)</div>
        <div>年许可水量 (万m³)</div>
    </div>
    <div
        class="col-12 index-font"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div style="margin-left: 30px">{{ indexData.count }}</div>
        <div style="margin-right: 30px">{{ indexData.license }}</div>
    </div>
    <div
        class="col-12 index-box"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div>年计划水量 (万m³)</div>
        <div>年累计水量 (万m³)</div>
    </div>
    <div
        class="col-12 index-font"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div style="margin-left: 30px">{{ indexData.plan }}</div>
        <div style="margin-right: 30px">{{ indexData.total }}</div>
    </div>
    <div
        class="col-12 index-box"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div>剩余计划水量 (万m³)</div>
        <div>已购许可水量 (万m³)</div>
    </div>
    <div
        class="col-12 index-font"
        style="
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            text-align: center;
        "
    >
        <div style="margin-left: 30px">{{ indexData.remain }}</div>
        <div style="margin-right: 30px">{{ indexData.surplus }}</div>
    </div>
</div>
<p-selectButton
    [options]="option"
    [(ngModel)]="selectMapType"
    optionLabel="label"
    optionValue="value"
    class="selectButton"
    (click)="changeLayer()"
></p-selectButton>
<div
    class="card"
    style="
        position: absolute;
        top: 100px;
        right: 30px;
        width: 350px;
        height: 250px;
    "
>
    <div class="filed header" style="text-align: center">正在报警的用户</div>
    <hr />
    <p-table [value]="warnList" [rowHover]="true" [scrollable]="true">
        <ng-template pTemplate="body" let-item>
            <tr style="font-size: 17px; font-weight: 100; margin-top: 10px">
                <th width="50%" (click)="locate(item)">
                    {{ item.applicantName }}
                </th>
                <th width="50%" (click)="locate(item)">
                    {{ item.wellNames.join(",") }}
                </th>
            </tr>
        </ng-template>
    </p-table>
</div>
<div class="map-tip">
    <div class="tip-item">
        <div class="icon" style="background: 'rgb(157,217,9)'"></div>
        <div class="word">正常运行</div>
    </div>
    <div class="tip-item">
        <div class="icon" style="background: 'rgb(221, 109, 115)'"></div>
        <div class="word">正在报警</div>
    </div>
    <div class="tip-item">
        <div class="icon" style="background: 'rgb(150,151,151)'"></div>
        <div class="word">已经废弃</div>
    </div>
    <div class="tip-item">
        <div class="icon" style="background: 'rgb(213,22,251)'"></div>
        <div class="word">尚未安装</div>
    </div>
</div>
